Bibliothèque Numérique ENI :
tous nos livres & vidéos, en accès illimité 24h/24. Cliquez ici
Jusqu'au 31/05 : Une offre vous attend. en cliquant ici

Conception Web

Utiliser les plans de travail

Pour prototyper des interfaces web ou mobile, les plans de travail se révèlent particulièrement pratiques car ils permettent de traiter plusieurs écrans dans un même document.

Dans l’exemple ci-après, chacun des écrans d’une application pour mobile est inclus dans son propre plan de travail.

images/25_CORR_004.png

Exporter les plans de travail

 Lors de l’export pour le Web (Fichier - Exportation - Exporter sous) vous pouvez choisir dans la colonne de gauche un ou plusieurs espaces de travail à enregistrer en une seule opération, chacun d’entre eux avec ses propres réglages spécifiques.

images/25_CORR_005.png

Copier les CSS

 Une fois une mise en page effectuée, choisissez le menu Calque - Copier CSS (ou Copier CSS via le menu du panneau Calque). Les données CSS correspondant au contenu du calque actif seront copiées et vous pourrez les coller dans un éditeur de texte de votre choix pour les exploiter.

images/P412-5.png
images/P412-6.png

Générer automatiquement des fichiers pour le Web à partir des calques

Il est parfois utile de pouvoir exporter séparément le contenu de chaque calque d’un document dans autant de fichiers distincts.

images/ADD_01.png

 Ouvrez le menu Fichier - Exportation - Calques en fichiers.

images/ADD_04.png

 Spécifiez les caractéristiques de l’export, en particulier le suffixe à appliquer et le format de fichier, puis cliquez sur Exécuter.

images/ADD_02.png

Les fichiers sont ensuite enregistrés dans le dossier voulu.

images/ADD_03.png

Notez qu’il est uniquement possible d’exporter les calques visibles, pour éviter par exemple d’exporter l’arrière-plan.

Exporter un document Photoshop pour le Web

Cette procédure d’exportation beaucoup plus moderne présente des fonctionnalités très utiles aux web designers, puisqu’il est possible de régler les paramètres à chaque export des calques, des groupes de calques, des plans de travail ou des documents Photoshop au format image.

 Sélectionnez Fichier - Exportation - Exporter sous pour exporter le document Photoshop actif. Tous les plans de travail du document seront exportés.

Pour activer la fonction Exporter sous pour les calques, groupes de calques ou plans de travail, sélectionnez-les dans le panneau Calques et faites un clic droit puis choisissez Exporter sous dans le menu contextuel.

Chaque calque, groupe de calques ou plan de travail sélectionné est exporté dans un fichier séparé.

 Cliquez simplement sur le images/SFCC1001_002.png pour créer plusieurs exports de la même composition de taille différente, ce qui est pratique pour les conceptions destinées à des périphériques de tailles variées.

images/SFCC1001_001.png

 Choisissez le format de fichier PNG, JPG, GIF ou SVG et fixez les paramètres spécifiques au format.

  • PNG : permet d’activer la Transparence (32 bits) ou d’exporter des images de petite taille (8 bits).

  • JPEG : choisissez une qualité d’image de 0 à 100.

 Fixez la largeur et la hauteur...

Enregistrer une image pour le Web (hérité)

L’ancien système d’enregistrement d’images optimisées pour le Web a encore ses adeptes. Mais le nouveau système que nous détaillons dans la section suivante est plus moderne.

 Fichier - Exportation - Enregistrer pour le Web (hérité) ou CtrlAltShift S (PC) ou CmdOptionShift S (Mac)

images/REL_028.png